<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title> ModularAdmin - Free Dashboard Theme | HTML Version </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->
    <link rel="stylesheet" href="css/vendor.css">
    <!-- Theme initialization -->
    <script>
        var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
        {};
        var themeName = themeSettings.themeName || '';
        if (themeName) {
            document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + themeName + '.css">');
        }
        else {
            document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
        }
    </script>
</head>

<body>
<div class="main-wrapper">
    <div class="app" id="app">
        <header class="header">
            <div class="header-block header-block-collapse hidden-lg-up">
                <button class="collapse-btn" id="sidebar-collapse-btn"><i class="fa fa-bars"></i></button>
            </div>
            <div class="header-block header-block-search hidden-sm-down">
                <form role="search">
                    <div class="input-container"><i class="fa fa-search"></i>
                        <input type="search" placeholder="Search">

                        <div class="underline"></div>
                    </div>
                </form>
            </div>
            <div class="header-block header-block-buttons">
                <a href="https://github.com/modularcode/modular-admin-html"
                   class="btn btn-oval btn-sm rounded-s header-btn"> <i class="fa fa-github-alt"></i> View on GitHub
                </a>
                <a href="https://github.com/modularcode/modular-admin-html/releases/download/v1.0.0/modular-admin-html-1.0.0.zip"
                   class="btn btn-oval btn-sm rounded-s header-btn"> <i class="fa fa-cloud-download"></i> Download .zip
                </a>
            </div>
            <div class="header-block header-block-nav">
                <ul class="nav-profile">
                    <li class="notifications new">
                        <a href="" data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <sup>
                            <span class="counter">8</span>
                        </sup> </a>

                        <div class="dropdown-menu notifications-dropdown-menu">
                            <ul class="notifications-container">
                                <li>
                                    <a href="" class="notification-item">
                                        <div class="img-col">
                                            <div class="img" style="background-image: url('assets/faces/3.jpg')"></div>
                                        </div>
                                        <div class="body-col">
                                            <p><span class="accent">Zack Alien</span> pushed new commit: <span
                                                    class="accent">Fix page load performance issue</span>. </p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="" class="notification-item">
                                        <div class="img-col">
                                            <div class="img" style="background-image: url('assets/faces/5.jpg')"></div>
                                        </div>
                                        <div class="body-col">
                                            <p><span class="accent">Amaya Hatsumi</span> started new task: <span
                                                    class="accent">Dashboard UI design.</span>. </p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="" class="notification-item">
                                        <div class="img-col">
                                            <div class="img" style="background-image: url('assets/faces/8.jpg')"></div>
                                        </div>
                                        <div class="body-col">
                                            <p><span class="accent">Andy Nouman</span> deployed new version of <span
                                                    class="accent">NodeJS REST Api V3</span></p>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                            <footer>
                                <ul>
                                    <li><a href="">
                                        View All
                                    </a></li>
                                </ul>
                            </footer>
                        </div>
                    </li>
                    <li class="profile dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                           aria-haspopup="true" aria-expanded="false">
                            <div class="img"
                                 style="background-image: url('https://avatars3.githubusercontent.com/u/3959008?v=3&s=40')"></div> <span
                                class="name">
    			      John Doe
    			    </span> </a>

                        <div class="dropdown-menu profile-dropdown-menu" aria-labelledby="dropdownMenu1">
                            <a class="dropdown-item" href="#"> <i class="fa fa-user icon"></i> Profile </a>
                            <a class="dropdown-item" href="#"> <i class="fa fa-bell icon"></i> Notifications </a>
                            <a class="dropdown-item" href="#"> <i class="fa fa-gear icon"></i> Settings </a>

                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="login.html"> <i class="fa fa-power-off icon"></i> Logout </a>
                        </div>
                    </li>
                </ul>
            </div>
        </header>
        <aside class="sidebar">
            <div class="sidebar-container">
                <div class="sidebar-header">
                    <div class="brand">
                        <div class="logo"><span class="l l1"></span> <span class="l l2"></span> <span
                                class="l l3"></span> <span class="l l4"></span> <span class="l l5"></span></div>
                        Modular Admin
                    </div>
                </div>
                <nav class="menu">
                    <ul class="nav metismenu" id="sidebar-menu">
                        <li>
                            <a href="index.html"> <i class="fa fa-home"></i> Dashboard </a>
                        </li>
                        <li>
                            <a href=""> <i class="fa fa-th-large"></i> Items Manager <i class="fa arrow"></i> </a>
                            <ul>
                                <li><a href="items-list.html">
                                    Items List
                                </a></li>
                                <li><a href="item-editor.html">
                                    Item Editor
                                </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href=""> <i class="fa fa-bar-chart"></i> Charts <i class="fa arrow"></i> </a>
                            <ul>
                                <li><a href="charts-flot.html">
                                    Flot Charts
                                </a></li>
                                <li><a href="charts-morris.html">
                                    Morris Charts
                                </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href=""> <i class="fa fa-table"></i> Tables <i class="fa arrow"></i> </a>
                            <ul>
                                <li><a href="static-tables.html">
                                    Static Tables
                                </a></li>
                                <li><a href="responsive-tables.html">
                                    Responsive Tables
                                </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="forms.html"> <i class="fa fa-pencil-square-o"></i> Forms </a>
                        </li>
                        <li class="active open">
                            <a href=""> <i class="fa fa-desktop"></i> UI Elements <i class="fa arrow"></i> </a>
                            <ul>
                                <li><a href="buttons.html">
                                    Buttons
                                </a></li>
                                <li class="active"><a href="cards.html">
                                    Cards
                                </a></li>
                                <li><a href="typography.html">
                                    Typography
                                </a></li>
                                <li><a href="icons.html">
                                    Icons
                                </a></li>
                                <li><a href="grid.html">
                                    Grid
                                </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href=""> <i class="fa fa-file-text-o"></i> Pages <i class="fa arrow"></i> </a>
                            <ul>
                                <li><a href="login.html">
                                    Login
                                </a></li>
                                <li><a href="signup.html">
                                    Sign Up
                                </a></li>
                                <li><a href="reset.html">
                                    Reset
                                </a></li>
                                <li><a href="error-404.html">
                                    Error 404 App
                                </a></li>
                                <li><a href="error-404-alt.html">
                                    Error 404 Global
                                </a></li>
                                <li><a href="error-500.html">
                                    Error 500 App
                                </a></li>
                                <li><a href="error-500-alt.html">
                                    Error 500 Global
                                </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="https://github.com/modularcode/modular-admin-html"> <i
                                    class="fa fa-github-alt"></i> Theme Docs </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <footer class="sidebar-footer">
                <ul class="nav metismenu" id="customize-menu">
                    <li>
                        <ul>
                            <li class="customize">
                                <div class="customize-item">
                                    <div class="row customize-header">
                                        <div class="col-xs-4"></div>
                                        <div class="col-xs-4">
                                            <label class="title">fixed</label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label class="title">static</label>
                                        </div>
                                    </div>
                                    <div class="row hidden-md-down">
                                        <div class="col-xs-4">
                                            <label class="title">Sidebar:</label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="sidebarPosition"
                                                       value="sidebar-fixed"> <span></span> </label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="sidebarPosition" value="">
                                                <span></span> </label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <label class="title">Header:</label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="headerPosition"
                                                       value="header-fixed"> <span></span> </label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="headerPosition" value="">
                                                <span></span> </label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <label class="title">Footer:</label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="footerPosition"
                                                       value="footer-fixed"> <span></span> </label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="footerPosition" value="">
                                                <span></span> </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="customize-item">
                                    <ul class="customize-colors">
                                        <li><span class="color-item color-red" data-theme="red"></span></li>
                                        <li><span class="color-item color-orange" data-theme="orange"></span></li>
                                        <li><span class="color-item color-green" data-theme="green"></span></li>
                                        <li><span class="color-item color-seagreen" data-theme="seagreen"></span></li>
                                        <li><span class="color-item color-blue active" data-theme=""></span></li>
                                        <li><span class="color-item color-purple" data-theme="purple"></span></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                        <a href=""> <i class="fa fa-cog"></i> Customize </a>
                    </li>
                </ul>
            </footer>
        </aside>
        <div class="sidebar-overlay" id="sidebar-overlay"></div>
        <article class="content cards-page">
            <div class="title-block">
                <h3 class="title">
                    Cards
                </h3>

                <p class="title-description"> Cards can contain almost any kind of element inside </p>
            </div>
            <section class="section">
                <div class="row">
                    <div class="col-xl-4">
                        <div class="card card-default">
                            <div class="card-header">
                                <div class="header-block">
                                    <p class="title"> Default card </p>
                                </div>
                            </div>
                            <div class="card-block">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est
                                    vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et,
                                    fringilla augue.</p>
                            </div>
                            <div class="card-footer"> Card Footer</div>
                        </div>
                    </div>
                    <!-- /.col-xl-4 -->
                    <div class="col-xl-4">
                        <div class="card card-primary">
                            <div class="card-header">
                                <div class="header-block">
                                    <p class="title"> Primary card </p>
                                </div>
                            </div>
                            <div class="card-block">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est
                                    vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et,
                                    fringilla augue.</p>
                            </div>
                            <div class="card-footer"> Card Footer</div>
                        </div>
                    </div>
                    <!-- /.col-xl-4 -->
                    <div class="col-xl-4">
                        <div class="card card-success">
                            <div class="card-header">
                                <div class="header-block">
                                    <p class="title"> Success card </p>
                                </div>
                            </div>
                            <div class="card-block">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est
                                    vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et,
                                    fringilla augue.</p>
                            </div>
                            <div class="card-footer"> Card Footer</div>
                        </div>
                    </div>
                    <!-- /.col-xl-4 -->
                </div>
                <!-- /.row -->
                <div class="row">
                    <div class="col-xl-4">
                        <div class="card card-info">
                            <div class="card-header">
                                <div class="header-block">
                                    <p class="title"> Info card </p>
                                </div>
                            </div>
                            <div class="card-block">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est
                                    vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et,
                                    fringilla augue.</p>
                            </div>
                            <div class="card-footer"> Card Footer</div>
                        </div>
                    </div>
                    <!-- /.col-xl-4 -->
                    <div class="col-xl-4">
                        <div class="card card-warning">
                            <div class="card-header">
                                <div class="header-block">
                                    <p class="title"> Warning card </p>
                                </div>
                            </div>
                            <div class="card-block">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est
                                    vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et,
                                    fringilla augue.</p>
                            </div>
                            <div class="card-footer"> Card Footer</div>
                        </div>
                    </div>
                    <!-- /.col-xl-4 -->
                    <div class="col-xl-4">
                        <div class="card card-danger">
                            <div class="card-header">
                                <div class="header-block">
                                    <p class="title"> Danger card </p>
                                </div>
                            </div>
                            <div class="card-block">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est
                                    vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et,
                                    fringilla augue.</p>
                            </div>
                            <div class="card-footer"> Card Footer</div>
                        </div>
                    </div>
                    <!-- /.col-xl-4 -->
                </div>
                <!-- /.row -->
            </section>
            <section class="section">
                <div class="row sameheight-container">
                    <div class="col-xl-6">
                        <div class="card sameheight-item">
                            <div class="card-block">
                                <!-- Nav tabs -->
                                <div class="card-title-block">
                                    <h3 class="title">
                                        Basic Tabs
                                    </h3></div>
                                <ul class="nav nav-tabs nav-tabs-bordered">
                                    <li class="nav-item"><a href="#home" class="nav-link active" data-target="#home"
                                                            data-toggle="tab" aria-controls="home" role="tab">Home</a>
                                    </li>
                                    <li class="nav-item"><a href="#profile" class="nav-link" data-target="#profile"
                                                            aria-controls="profile" data-toggle="tab"
                                                            role="tab">Profile</a></li>
                                    <li class="nav-item"><a href="" class="nav-link" data-target="#messages"
                                                            aria-controls="messages" data-toggle="tab" role="tab">Messages</a>
                                    </li>
                                    <li class="nav-item"><a href="" class="nav-link" data-target="#settings"
                                                            aria-controls="settings" data-toggle="tab" role="tab">Settings</a>
                                    </li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content tabs-bordered">
                                    <div class="tab-pane fade in active" id="home">
                                        <h4>Home Tab</h4>

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip
                                            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                                            cupidatat non proident, sunt in culpa qui officia
                                            deserunt mollit anim id est laborum.</p>
                                    </div>
                                    <div class="tab-pane fade" id="profile">
                                        <h4>Profile Tab</h4>

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip
                                            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                                            cupidatat non proident, sunt in culpa qui officia
                                            deserunt mollit anim id est laborum.</p>
                                    </div>
                                    <div class="tab-pane fade" id="messages">
                                        <h4>Messages Tab</h4>

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip
                                            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                                            cupidatat non proident, sunt in culpa qui officia
                                            deserunt mollit anim id est laborum.</p>
                                    </div>
                                    <div class="tab-pane fade" id="settings">
                                        <h4>Settings Tab</h4>

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip
                                            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                                            cupidatat non proident, sunt in culpa qui officia
                                            deserunt mollit anim id est laborum.</p>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-block -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col-xl-6 -->
                    <div class="col-xl-6">
                        <div class="card sameheight-item">
                            <div class="card-block">
                                <div class="card-title-block">
                                    <h3 class="title">
                                        Pill Tabs
                                    </h3></div>
                                <!-- Nav tabs -->
                                <ul class="nav nav-pills">
                                    <li class="nav-item"><a href="" class="nav-link active" data-target="#home-pills"
                                                            aria-controls="home-pills" data-toggle="tab"
                                                            role="tab">Home</a></li>
                                    <li class="nav-item"><a href="" class="nav-link" data-target="#profile-pills"
                                                            aria-controls="profile-pills" data-toggle="tab" role="tab">Profile</a>
                                    </li>
                                    <li class="nav-item"><a href="" class="nav-link" data-target="#messages-pills"
                                                            aria-controls="messages-pills" data-toggle="tab" role="tab">Messages</a>
                                    </li>
                                    <li class="nav-item"><a href="" class="nav-link" data-target="#settings-pills"
                                                            aria-controls="settings-pills" data-toggle="tab" role="tab">Settings</a>
                                    </li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div class="tab-pane fade in active" id="home-pills">
                                        <h4>Home Tab</h4>

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip
                                            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                                            cupidatat non proident, sunt in culpa qui officia
                                            deserunt mollit anim id est laborum.</p>
                                    </div>
                                    <div class="tab-pane fade" id="profile-pills">
                                        <h4>Profile Tab</h4>

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip
                                            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                                            cupidatat non proident, sunt in culpa qui officia
                                            deserunt mollit anim id est laborum.</p>
                                    </div>
                                    <div class="tab-pane fade" id="messages-pills">
                                        <h4>Messages Tab</h4>

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip
                                            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                                            cupidatat non proident, sunt in culpa qui officia
                                            deserunt mollit anim id est laborum.</p>
                                    </div>
                                    <div class="tab-pane fade" id="settings-pills">
                                        <h4>Settings Tab</h4>

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip
                                            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                                            cupidatat non proident, sunt in culpa qui officia
                                            deserunt mollit anim id est laborum.</p>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-block -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col-xl-6 -->
                </div>
            </section>
        </article>
        <footer class="footer">
            <div class="footer-block buttons">
                <iframe class="footer-github-btn"
                        src="https://ghbtns.com/github-btn.html?user=modularcode&repo=modular-admin-html&type=star&count=true"
                        frameborder="0" scrolling="0" width="140px" height="20px"></iframe>
            </div>
            <div class="footer-block author">
                <ul>
                    <li> created by <a href="https://github.com/modularcode">ModularCode</a></li>
                    <li><a href="https://github.com/modularcode/modular-admin-html#get-in-touch">get in touch</a></li>
                </ul>
            </div>
        </footer>
        <div class="modal fade" id="modal-media">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span> <span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Media Library</h4></div>
                    <div class="modal-body modal-tab-container">
                        <ul class="nav nav-tabs modal-tabs" role="tablist">
                            <li class="nav-item"><a class="nav-link" href="#gallery" data-toggle="tab" role="tab">Gallery</a>
                            </li>
                            <li class="nav-item"><a class="nav-link active" href="#upload" data-toggle="tab" role="tab">Upload</a>
                            </li>
                        </ul>
                        <div class="tab-content modal-tab-content">
                            <div class="tab-pane fade" id="gallery" role="tabpanel">
                                <div class="images-container">
                                    <div class="row"></div>
                                </div>
                            </div>
                            <div class="tab-pane fade active in" id="upload" role="tabpanel">
                                <div class="upload-container">
                                    <div id="dropzone">
                                        <form action="/" method="POST" enctype="multipart/form-data"
                                              class="dropzone needsclick dz-clickable" id="demo-upload">
                                            <div class="dz-message-block">
                                                <div class="dz-message needsclick"> Drop files here or click to
                                                    upload.
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Insert Selected</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
        <div class="modal fade" id="confirm-modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title"><i class="fa fa-warning"></i> Alert</h4></div>
                    <div class="modal-body">
                        <p>Are you sure want to do this?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
</div>
<!-- Reference block for JS -->
<div class="ref" id="ref">
    <div class="color-primary"></div>
    <div class="chart">
        <div class="color-primary"></div>
        <div class="color-secondary"></div>
    </div>
</div>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
</body>

</html>